<template>
  <div>
    <Page ref="page" :search-config="searchConfig" :table-config="tableConfig" :toolbar-config="toolbarConfig" />
    <user-add ref="userAdd" @save-success="addSuccess" />
    <user-update ref="userUpdate" @save-success="updateSuccess" />
  </div>
</template>
<script setup lang="ts">
import { querySelectRoles } from "@/api/user/roleApi";
import { deleteUser, queryUserPage } from "@/api/user/userApi";
import { MPage as Page, PageInstance } from "page-com";
import { PageSearchConfig, PageTableConfig, ToolbarConfig } from "page-com";
import { reactive, ref, shallowReactive, useTemplateRef, provide } from "vue";
import UserAdd from "./UserAdd.vue";
import { msgConfirm, successMsg } from "@/utils/message";
import UserUpdate from "./UserUpdate.vue";
import { hasPerms } from "@/utils/auth";
import { useOffineIcon } from "@/components/ReIcon/src/hooks";
const searchConfig = shallowReactive<PageSearchConfig>({
  pageSearchFrame: [
    {
      frameType: "input",
      key: "name",
      label: "用户名"
    },
    {
      frameType: "input",
      key: "nickName",
      label: "昵称"
    },
    {
      frameType: "multiSelect",
      key: "roleIds",
      label: "角色",
      options: roleOptions()
    }
  ],
  searchFun: queryUserPage
});
const tableConfig = reactive<PageTableConfig>({
  pageTableFrame: [
    {
      key: "name",
      label: "用户名"
    },
    {
      key: "nickName",
      label: "昵称"
    },
    {
      key: "headImg",
      label: "头像",
      frameType: "avatar"
    },
    {
      key: "roles",
      label: "角色",
      render(data: string[]) {
        return data?.join(",");
      }
    },
    {
      key: "createTime",
      label: "创建时间"
    },
    {
      frameType: "multi",
      key: "multi",
      label: "操作",
      separate: "",
      multi: [
        {
          frameType: "link",
          value: "删除",
          key: "deleteBtn",
          icon: useOffineIcon("ep:delete"),
          click: deleteUserFun,
          visible: hasPerms("/system/user/del")
        },
        {
          frameType: "link",
          value: "修改",
          key: "updateBtn",
          icon: useOffineIcon("ep:edit"),
          click: showUpdateUser,
          visible: hasPerms("/system/user/update")
        }
      ]
    }
  ]
});
const toolbarConfig = shallowReactive<ToolbarConfig>({
  buttons: [
    {
      value: "添加用户",
      click: showAddUser,
      visible: hasPerms("/system/user/add")
    }
  ]
});
const userAdd = useTemplateRef("userAdd");
const page = useTemplateRef<PageInstance>("page");
function showAddUser() {
  userAdd.value.show();
}
const userUpdate = useTemplateRef("userUpdate");
function showUpdateUser(vo: ShopUserVo) {
  userUpdate.value.show(vo);
}

function addSuccess() {
  page.value.onSearch();
}
function updateSuccess() {
  page.value.onSearch();
}
let roleOptionsData: SelectVo[] = [];
async function roleOptions() {
  let res = await querySelectRoles();
  if (res.code == RESPONSE_CODE.SUCCESS) {
    roleOptionsData.push(...res.data);
    return res.data;
  }
  return [];
}
provide("roleOptions", () => roleOptionsData);

function deleteUserFun(vo: ShopUserVo) {
  msgConfirm("确认删除吗？", async () => {
    let res = await deleteUser(vo.id);
    if (res.code == RESPONSE_CODE.SUCCESS) {
      successMsg("删除成功");
      page.value.onSearch();
    }
    return res;
  });
}
</script>
